<template>
  <div class="setting-page">
    <ul class="left-setting-menu">
      <li>
        <b-icon type="email" />
        <a-select
            ref="select"
            style="flex-grow: 1;"
        >
          <a-select-option value="1299563700@qq.com">1299563700@qq.com</a-select-option>
          <a-select-option value="uuuuuuuuuuu@aliyun.com">uuuuuuuuuuu@aliyun.com</a-select-option>
        </a-select>
      </li>
      <li v-for="item in menus" :key="item.icon" @click="menuClick(item)" :class="{ active: item.icon === activeMenuItem.icon, 'is-line': item.isLine }">
        <template v-if="!item.isLine">
          <b-icon :type="item.icon" /> {{ item.label }}
        </template>
      </li>
    </ul>
    <div class="right-setting-component">
      <div class="title">{{ contentTitle }}</div>
      <div class="right-setting-content">
        <component :is="activeMenuItem.component"/>
      </div>
    </div>
  </div>
  <AddEmailAccount ref="addEmail"/>
</template>

<script setup>
import Account from './components/Account.vue'
import AccountSetting from './components/AccountSetting.vue'
import About from './components/About.vue'
import ServerSetting from './components/ServerSetting.vue'
import SystemSetting from './components/SystemSetting.vue'
import AddEmailAccount from '../components/AddEmailAccount.vue'

import { computed, shallowRef, ref } from 'vue'



const menus = [
  { label: '添加邮箱账户', icon: 'add-account', clickFn: addAccount },
  { label: '账户信息', icon: 'account', component: Account },
  { label: '账户设置', icon: 'account-setting', component: AccountSetting },
  { label: '邮件服务器设置', icon: 'server-setting', component: ServerSetting },
  { isLine: true, icon: 'isLine' },
  { label: '系统设置', icon: 'setting', component: SystemSetting },
  { label: '关于我们', icon: 'about', component: About },
]
const activeMenuItem = shallowRef(menus[1])
const contentTitle = computed(() => activeMenuItem.value.label)
const addEmail = ref({})

function addAccount() {
  console.log('xxx')
  addEmail.value.show()
}

function menuClick(data) {
  if (data.component) {
    activeMenuItem.value = data
  }
  if (typeof data.clickFn === 'function') {
    data.clickFn()
  }
}

</script>

<style lang="less" scoped>
.setting-page{
  height: 100%;
  display: flex;
  .left-setting-menu{
    padding-top: 16px;
    width: 280px;
    background: #ffffff;
    height: 100%;
    li:not(.is-line){
      height: 40px;
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 0 16px;
      .anticon{
        color: #333;
        font-size: 13px;
        margin-right: 14px;
      }
      &.active{
        color: @primary-color;
        background: #E5F3F3;
        .anticon{
          color: inherit;
        }
      }
      &:hover{
        background: #E5F3F3;
      }
    }
    li.is-line{
      height: 1px;
      background: #ccc;
      width: calc(100% - 16px);
      margin: 4px 0 4px 8px;
    }
  }
  .right-setting-component{
    flex-grow: 1;
    padding: 0 16px 16px;
    .title{
      padding: 16px 0 8px 8px;
      font-size: 20px;
      font-weight: 600;
    }
    .right-setting-content{
      background: #ffffff;
      padding: 16px;
      height: calc(100% - 55px);
    }
  }
}
</style>